play_urls=[]
//当前播放索引.
current_play_url_index = 0;
for (i = 0; i < play_urls.length; i++) {
	if (i != current_play_url_index) {
		document.getElementById('menu1').innerHTML += '<a href=\'javascript:chanagePlayerUrl(' + i + ')\'>' + (i + 1) + '</a>&nbsp;&nbsp;';
		document.getElementById('menu2').innerHTML += '<a href=\'javascript:chanagePlayerUrl(' + i + ')\'>' + (i + 1) + '</a>&nbsp;&nbsp;';
	}
	else {
		document.getElementById('menu1').innerHTML += (i + 1) + '&nbsp;&nbsp;';
		document.getElementById('menu2').innerHTML += (i + 1) + '&nbsp;&nbsp;';
	}
}
var player = null
var player1 = null
function createPlayer() {
	//player config.
	var videoObject = {
		debug: false,
		playerID: '1',
		container: '#video', //容器的ID或className
		variable: 'player',//播放函数名称
		loaded: 'loadedHandler',
		poster: '../material/poster.jpg',//封面图片
		video: [play_urls[current_play_url_index]],
		volume: 0.8
	};

	//create player object.
	player = new ckplayer(videoObject);

	//create player1 object.
	videoObject.playerID = '2';
	videoObject.container = '#video1';
	videoObject.variable = 'player1';
	videoObject.loaded = 'loaded1Handler';
	videoObject.volume = 0;
	player1 = new ckplayer(videoObject);
}

function loadedHandler() {
	//player add even listener.

	player.addListener('seekTime', seekHandler);
	player.addListener('time', timeHandler);
	player.addListener('play', playHandler);
	player.addListener('pause', pauseHandler);
	//player.addListener('volume', volumeHandler);
	player.addListener('ended', endHandler);
}
function loaded1Handler() {
	//player1 add event listener.
	player1.addListener('seekTime', seekHandler);
	player1.addListener('time', timeHandler);
	player1.addListener('play', playHandler);
	player1.addListener('pause', pauseHandler);
	//player1.addListener('volume', volumeHandler);
}

p1_time = 0;//第一个播放器当前播放时间.
p2_time = 0;//第二个播放器当前播放时间.
seek_time = -1;//跳转时间.
//修改两个播放器进度，保持画面一致.
function timeHandler(time, playerObject) {
	if (seek_time == -1) {
		if (playerObject.playerID == 1) {
			p1_time = time;
		}
		if (playerObject.playerID == 2) {
			p2_time = time;
		}
		if ((-0.025 < (p1_time - p2_time) < 0) | (p1_time - p2_time) > 0.26) {
			player.videoSeek(time);
			//player1.videoSeek(time);
		}
	}
	else {
		if (time > seek_time) {
			seek_time = -1;
		}
	}
}
control_display = false

function endHandler(playObject) {
	chanagePlayerUrl(current_play_url_index);
}

function volumeHandler(vol, playObject) {
	getPlayer(playObject).removeListener('volume', volumeHandler);
	playerSelect(playObject).changeVolume(vol);
	getPlayer(playObject).addListener('volume', volumeHandler);
}

function pauseHandler(playObject) {
	getPlayer(playObject).removeListener('pause', pauseHandler);
	playerSelect(playObject).videoPause();
	getPlayer(playObject).addListener('pause', pauseHandler);
}

function playHandler(playObject) {
	getPlayer(playObject).removeListener('play', playHandler);
	playerSelect(playObject).videoPlay();
	getPlayer(playObject).addListener('play', playHandler);
}

function seekHandler(time, playObject) {
	getPlayer(playObject).removeListener('seekTime', seekHandler);
	seek_time = time;
	playerSelect(playObject).videoSeek(time);
	getPlayer(playObject).addListener('seekTime', seekHandler);
}

function playerSelect(p_ID) {
	if (p_ID.playerID == 1) {
		return player1;
	}
	if (p_ID.playerID == 2) {
		return player;
	}
}

function getPlayer(p_ID) {
	if (p_ID.playerID == 1) {
		return player;
	}
	if (p_ID.playerID == 2) {
		return player1;
	}
}

function selectCurrent_url() {
	document.getElementById('video').style.display = 'none';
	document.getElementById('video1').style.display = 'none';
	document.getElementById('select1').style.display = 'none';
	document.getElementById('select2').style.display = 'none';
	document.getElementById('menu1').style.display = '';
	document.getElementById('menu2').style.display = '';
}

function selectCloseSelectCurrent_url() {
	document.getElementById('video').style.display = '';
	document.getElementById('video1').style.display = '';
	document.getElementById('select1').style.display = '';
	document.getElementById('select2').style.display = '';
	document.getElementById('menu1').style.display = 'none';
	document.getElementById('menu2').style.display = 'none';
}

function vr_config_page_display() {
	if (G_E('vr_config_page').style.display == 'none') {
		G_E('vr_config_page').style.display = '';
	}
	else {
		G_E('vr_config_page').style.display = 'none';
	}
}

function vr_config_models_display() {
	if (G_E('vr_config_models').style.display == 'none') {
		G_E('vr_config_models').style.display = '';
	}
	else {
		G_E('vr_config_models').style.display = 'none';
	}
}

function chanagePlayerUrl(url_index) {
	selectCloseSelectCurrent_url();
	video_config = [play_urls[url_index]];
	videoObject.container = '#video';
	videoObject.playerID = '1';
	videoObject.autoplay = true;
	videoObject.variable = 'player';
	videoObject.loaded = 'loadedHandler';
	videoObject.video = video_config;
	player = null;
	player1 = null;
	player = new ckplayer(videoObject);
	videoObject.container = '#video1';
	videoObject.playerID = '2';
	videoObject.variable = 'player1';
	videoObject.loaded = 'loaded1Handler';
	player1 = new ckplayer(videoObject);
	current_play_url_index = url_index + 1;
	//loadedHandler();
	player.videoSeek(0);
	player.playOrPause();
	player.playOrPause();
}

function playerControl(state) {
	player1.changeControlBarShow(state);
	player.changeControlBarShow(state);
}

function displaySelectNo() {
	if (document.getElementById('select1').style.color == 'rgb(0, 0, 0)') {
		document.getElementById('select1').style.color = '#ffffff';
		document.getElementById('select2').style.color = '#ffffff';
	}
	else {
		document.getElementById('select1').style.color = '#000000';
		document.getElementById('select2').style.color = '#000000';
	}
	if (document.getElementById('btn_setVR1').style.color == 'rgb(0, 0, 0)') {
		document.getElementById('btn_setVR1').style.color = '#ffffff';
		document.getElementById('btn_setVR2').style.color = '#ffffff';
	}
	else {
		document.getElementById('btn_setVR1').style.color = '#000000';
		document.getElementById('btn_setVR2').style.color = '#000000';
	}
	if (document.getElementById('btn_vr_config_models_1').style.color == 'rgb(0, 0, 0)') {
		document.getElementById('btn_vr_config_models_1').style.color = '#ffffff';
		document.getElementById('btn_vr_config_models_2').style.color = '#ffffff';
	}
	else {
		document.getElementById('btn_vr_config_models_1').style.color = '#000000';
		document.getElementById('btn_vr_config_models_2').style.color = '#000000';
	}
}

const sizeType = {
	document: 1,
	element: 2,
	node: 3
}

function getSize() {

}
const size = new getSize()
getSize.prototype.getPreviousNode = function (node) {
	/*返回元素上一个兄弟元素*/
	return node.previousElementSibling
}

getSize.prototype.getDeviceType = function () {
	var documentSize = size.GET(sizeType.document)
	if (documentSize.width > 1024) {
		return 'web';
	} else if (documentSize.width > 500 && documentSize.width <= 1024) {
		return 'pad';
	} else {
		return 'phone';
	}
}

getSize.prototype.GET = function (getType, args = null) {
	var m_size = {
		width: 0,
		height: 0,
		offsetWidth: 0,
		offsetHeight: 0,
		x: 0,
		y: 0,
	}
	switch (getType) {
		case sizeType.document: {
			m_size.width = document.documentElement.clientWidth || document.body.clientWidth;
			m_size.height = document.documentElement.clientHeight || document.body.clientHeight;
			break
		}
		case sizeType.element: {
			if (args != null) {
				var node = args
				if (node != null) {
					m_size.offsetHeight = node.offsetHeight
					m_size.offsetWidth = node.offsetWidth
					m_size.width = node.clientWidth
					m_size.height = node.clientHeight
					m_size.x = node.offsetLeft
					m_size.y = node.offsetTop
				}
			}
			break;
		}
		case sizeType.node: {
			if (args != null) {
				var node = args
				m_size.offsetHeight = node.offsetHeight
				m_size.offsetWidth = node.offsetWidth
				m_size.width = node.clientWidth
				m_size.height = node.clientHeight
				m_size.x = node.offsetLeft
				m_size.y = node.offsetTop
			}
			break;
		}
	}
	return m_size
};

//配置VR参数
var vr_config = {
	O_D_: 80, //设置播放器宽度(百分比);
	P_D_: 100, //瞳距
	Screen_Heigth: 115//屏幕高度偏移量;
}
var CURRENT_O_D_STEP = 5; //当前物距步长
var CURRENT_P_D_STEP = 5; //当前瞳距步长
var CURRENT_S_H_STEP = 5;	//屏幕高度步长

var CURRENT_O_D = vr_config.O_D_;
var CURRENT_P_D = vr_config.P_D_;
var CURRENT_S_H = vr_config.Screen_Heigth;
var keepmiddle = true
function layout() {
	p1_rect = size.GET(sizeType.element, G_E('video'))
	p2_rect = size.GET(sizeType.element, G_E('video1'))
	p_box = size.GET(sizeType.element, G_E('player_box'))
	G_E('video').style.height = p1_rect.width * (3 / 4) + 'px';
	G_E('video1').style.height = p2_rect.width * (3 / 4) + 'px';
	if (keepmiddle) {
		m_marginTop = (size.GET(sizeType.document).height - p_box.height) / 2;
		G_E('player_box').style.marginTop = m_marginTop + 'px';
		CURRENT_S_H = m_marginTop;
		vr_config.Screen_Heigth= m_marginTop;
	}
}

function setOD_step(operation) {
	operation == '+' ? CURRENT_O_D_STEP += 1 : operation == '-' ? CURRENT_O_D_STEP -= 1 : CURRENT_O_D_STEP = CURRENT_O_D_STEP;
	if (CURRENT_O_D_STEP <= 0) {
		CURRENT_O_D_STEP = 1;
	}
	setVRConfigParams();
}

function setPD_step(operation) {
	operation == '+' ? CURRENT_P_D_STEP += 1 : operation == '-' ? CURRENT_P_D_STEP -= 1 : CURRENT_P_D_STEP = CURRENT_P_D_STEP;
	if (CURRENT_P_D_STEP <= 0) {
		CURRENT_P_D_STEP = 1;
	}
	setVRConfigParams();
}

function setS_H_step(operation) {
	operation == '+' ? CURRENT_S_H_STEP += 1 : operation == '-' ? CURRENT_S_H_STEP -= 1 : CURRENT_S_H_STEP = CURRENT_S_H_STEP;
	p_height = window.screen.availHeight;//获取屏幕高。
	p_player_box_height = document.getElementById('player_box').clientHeight;
	m_top = (p_height - p_player_box_height) / 2 + CURRENT_S_H;
	if (m_top < 0) {
		CURRENT_S_H_STEP = 0;
	}
	setVRConfigParams()
}

function setOD(operation) {
	operation == '+' ? CURRENT_O_D += CURRENT_O_D_STEP : operation == '-' ? CURRENT_O_D -= CURRENT_O_D_STEP : CURRENT_O_D = CURRENT_O_D;
	CURRENT_O_D = CURRENT_O_D > 100 ? 100 : CURRENT_O_D < 20 ? 20 : CURRENT_O_D;
	setODConfig();
}

function setPD(operation) {
	operation == '+' ? CURRENT_P_D += CURRENT_P_D_STEP : operation == '-' ? CURRENT_P_D -= CURRENT_P_D_STEP : CURRENT_P_D = CURRENT_P_D;
	CURRENT_P_D = CURRENT_P_D > 200 ? 200 : CURRENT_P_D < 0 ? 0 : CURRENT_P_D;
	setPDConfig();
}

function setS_H(operation) {
	keepmiddle = false
	operation == '+' ? CURRENT_S_H += CURRENT_S_H_STEP : operation == '-' ? CURRENT_S_H -= CURRENT_S_H_STEP : CURRENT_S_H = CURRENT_S_H;
	setScreenHeightConfig();
}

function setScreenHeightConfig() {
	p_height = window.screen.availHeight;//获取屏幕高。
	p_player_box_height = document.getElementById('player_box').clientHeight;
	m_top = CURRENT_S_H;//(p_height - p_player_box_height) / 2 + CURRENT_S_H;
	document.getElementById('player_box').style.marginTop = m_top + 'px';
	setVRConfigParams();
}
function setODConfig() {
	G_E('video').style.width = CURRENT_O_D + '%';
	G_E('video1').style.width = CURRENT_O_D + '%';
	G_E('menu1').style.width = CURRENT_O_D + '%';
	G_E('menu_1_1').style.width = CURRENT_O_D + '%';
	G_E('menu_1_2').style.width = CURRENT_O_D + '%';
	G_E('menu2').style.width = CURRENT_O_D + '%';
	G_E('vr_config1').style.width = CURRENT_O_D + '%';
	G_E('vr_config2').style.width = CURRENT_O_D + '%';
	G_E('vr_config_models_1').style.width = CURRENT_O_D + '%';
	G_E('vr_config_models_2').style.width = CURRENT_O_D + '%';
	setVRConfigParams();
}
function setPDConfig() {
	G_E('video').style.marginRight = CURRENT_P_D + 'px';
	G_E('video1').style.marginLeft = CURRENT_P_D + 'px';
	G_E('menu1').style.marginRight = CURRENT_P_D + 'px';
	G_E('menu2').style.marginLeft = CURRENT_P_D + 'px';
	G_E('menu_1_1').style.marginRight = CURRENT_P_D + 'px';
	G_E('menu_1_2').style.marginLeft = CURRENT_P_D + 'px';
	G_E('vr_config1').style.marginRight = CURRENT_P_D + 'px';
	G_E('vr_config2').style.marginLeft = CURRENT_P_D + 'px';
	G_E('vr_config_models_1').style.marginRight = CURRENT_P_D + 'px';
	G_E('vr_config_models_2').style.marginLeft = CURRENT_P_D + 'px';
	setVRConfigParams();
}

function loadVRConfig(od = null, pd = null, sh = null) {
	if (od != null & pd != null & sh != null) {
		CURRENT_O_D = od;
		CURRENT_P_D = pd;
		CURRENT_S_H = sh;
	}
	setPDConfig();
	setODConfig();
	setScreenHeightConfig();
}

function setVRConfigParams() {
	G_E('pd_1').innerHTML = CURRENT_P_D;
	G_E('pd_s_1').innerHTML = CURRENT_P_D_STEP;
	G_E('pd_2').innerHTML = CURRENT_P_D;
	G_E('pd_s_2').innerHTML = CURRENT_P_D_STEP;

	G_E('od_1').innerHTML = CURRENT_O_D;
	G_E('od_s_1').innerHTML = CURRENT_O_D_STEP;
	G_E('od_2').innerHTML = CURRENT_O_D;
	G_E('od_s_2').innerHTML = CURRENT_O_D_STEP;

	G_E('sh_1').innerHTML = CURRENT_S_H;
	G_E('sh_s_1').innerHTML = CURRENT_S_H_STEP;
	G_E('sh_2').innerHTML = CURRENT_S_H;
	G_E('sh_s_2').innerHTML = CURRENT_S_H_STEP;
	layout();
}

function G_E(args) {
	o_element = document.getElementById(args);
	if (typeof (o_element) != 'undefined') {
		return o_element;
	}
	return null;
}
/*
window.onload = function () {
	keepmiddle = true
	createPlayer();
	loadVRConfig();
	console.log('b')
	//window.layout();
};

window.onresize = function () {
	keepmiddle = true
	loadVRConfig();
	//window.layout();
};*/